<template>
  <!-- 经典布局 -->
  <el-container class="layout-stream">
    <el-container>
      <el-header :class="{ 'header-dark': isHeaderDark }" v-if="!isMaximize">
        <!-- logo -->
        <AppLogo showTitle />
        <!-- 菜单 -->
        <AppMenu mode="horizontal" :collapse="false" />
        <!-- 顶栏 -->
        <AppHeader />
      </el-header>

      <!-- 标签栏 -->
      <AppTabbar v-show="isTabbar && !isMaximize" />

      <el-main>
        <!-- 最大化按钮 -->
        <Maximize class="minimize-btn fs-20" v-if="isMaximize"></Maximize>
        <!-- 主内容 -->
        <AppMain />
      </el-main>

      <el-footer v-if="isFooter && !isMaximize">
        <!-- 页脚 -->
        <AppFooter />
      </el-footer>
    </el-container>
  </el-container>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { useThemeStore } from '@/stores/theme'
import AppHeader from '../components/AppHeader/AppHeader.vue'
import AppLogo from '../components/AppLogo/AppLogo.vue'
import AppMenu from '../components/AppMenu/AppMenu.vue'
import AppMain from '../components/AppMain/AppMain.vue'
import AppFooter from '../components/AppFooter/AppFooter.vue'
import AppTabbar from '../components/AppTabbar/AppTabbar.vue'
import Maximize from '../widgets/Maximize/Maximize.vue'

const themeStore = useThemeStore()
const { isHeaderDark, isTabbar, isMaximize, isFooter } = storeToRefs(themeStore)
</script>

<style lang="scss" scoped>
.layout-stream {
  width: 100%;
  height: 100%;
  color: var(--text-color);

  .el-header {
    --el-header-height: var(--header-height);
    --el-header-padding: 0;
    --el-menu-horizontal-height: calc(var(--header-height) - 1px);

    display: flex;
    background-color: var(--header-bg-color);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);

    &.header-dark {
      --header-bg-color: #1c1e23;
      --text-color: #ffffff;
    }

    .app-logo {
      width: var(--sidebar-max-width);
      height: var(--header-height);
      color: var(--text-color);
      transition: width 0.3s ease;
    }
  }

  .el-main {
    --el-main-padding: 0;

    background-color: var(--main-bg-color);

    .minimize-btn {
      position: fixed;
      top: 0;
      right: 0;
      z-index: 999999;
    }
  }

  .el-footer {
    --el-footer-height: var(--footer-height);
    --el-footer-padding: 0;

    background-color: var(--footer-bg-color);
    border-top: 1px solid var(--border-color);
  }
}
</style>
